<template>
  <header-bar></header-bar>
  <div class="gray-row">
    <div class="text">留言</div>
  </div>
  <el-row class="content" type="flex" justify="center" align="middle">
    <div class="input-area">
      <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" placeholder="你想看什么XP的图图? 你对本网站有什么建议? ..."
        maxlength="1000" v-model="inputMessage"></el-input>
    </div>
  </el-row>
  <div class="send-button">
    <el-button type="primary" @click="messageSend">我要留言</el-button>
  </div>
  <div class="message-box">
    <div class="message" v-for="(item, index) in message" :key="index">
      {{ message.length - index }}.&emsp;{{ item }}
    </div>
  </div>
</template>

<script setup>
import { onBeforeMount, ref } from 'vue'
import {
  getBoardMessage,
  sendBoardMessage
} from '../api/message'
import { ElMessage } from 'element-plus'
import HeaderBar from '@/components/HeaderBar.vue'

const inputMessage = ref('')
const message = ref(null)
const messageSend = () => {
  if (inputMessage.value === '') {
    ElMessage.error({
      message: '请输入信息！',
      duration: 1000,
      showClose: true
    })
  } else {
    sendBoardMessage(inputMessage.value).then((res) => {
      ElMessage.success({ message: '发送成功', showClose: true })
      inputMessage.value = ''
      getBoardMessage().then((res) => {
        message.value = res.data.message
      })
    })
  }
}
onBeforeMount(() => {
  getBoardMessage().then((res) => {
    console.log(res)
    message.value = res.data.message
  })
})
</script>

<style scoped lang="less">
.gray-row {
  background-color: #f5f5f5;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;

  .text {
    font-weight: 700;
  }
}

.content {
  margin-top: 20px;
}

.message-box {
  display: flex;
  flex-direction: column;
}

.input-area {
  width: 600px;
  margin-bottom: 20px;
}

@media screen and (max-width: 600px) {
  .input-area {
    width: 100%;
  }
}

.send-button {
  margin-bottom: 20px;
}
</style>
